<template>
  <div class="jumbotron">
    <h1 class="display-4">这是添加商品的页面</h1>
    <p class="lead">
      This is a simple hero unit, a simple jumbotron-style component for calling
      extra attention to featured content or information.
    </p>
    <hr class="my-4" />
    <p>
      It uses utility classes for typography and spacing to space content out
      within the larger container.
    </p>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label"
        >商品名称</label
      >
      <div class="col-sm-10">
        <input v-model="commodityName" type="text" class="form-control" id="inputPassword" />
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label"
        >商品描述</label
      >
      <div class="col-sm-10">
        <input v-model="commodityDetails" type="text" class="form-control" id="inputPassword" />
      </div>
    </div>
    <button @click="add" class="btn btn-primary btn-lg">点击添加</button>
  </div>
</template>

<script>
export default {
  name:'Login',
  data() {
    return {
      commodityName:'',
      commodityDetails:'',
      commodityImg:''
    }
  },
  methods:{
    add(){
      let a = Math.floor(Math.random()*3)+1
      console.log(a);
      this.$bus.$emit('getcommodity',{
        commodityName:this.commodityName,
        commodityDetails:this.commodityDetails,
        commodityImg:require('../assets/coffee'+a+'.jpg')
      })
      alert('添加成')
    }
  }
};
</script>

<style>
</style>